<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胸围计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .calculator {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .input-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #e8f5e9;
            border-radius: 5px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            display: none;
        }
        .instructions {
            margin-top: 20px;
            padding: 15px;
            background-color: #e3f2fd;
            border-radius: 5px;
            font-size: 14px;
        }
        .instructions h3 {
            margin-top: 0;
        }
        .instructions ul {
            padding-left: 20px;
        }
        .instructions li {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>胸围罩杯计算器</h1>
        <div class="input-group">
            <label for="underBust">下胸围 (cm)</label>
            <input type="number" id="underBust" placeholder="请输入下胸围尺寸" min="60" max="150" step="0.1">
        </div>
        <div class="input-group">
            <label for="overBust">上胸围 (cm)</label>
            <input type="number" id="overBust" placeholder="请输入上胸围尺寸" min="60" max="150" step="0.1">
        </div>
        <button onclick="calculateSize()">计算罩杯</button>
        <div id="result" class="result"></div>
        
        <div class="instructions">
            <h3>使用说明</h3>
            <ul>
                <li>下胸围：身体最下胸围处的周长（通常在乳房根部）</li>
                <li>上胸围：胸部最丰满处的周长</li>
                <li>罩杯计算基于上下胸围差值，支持 AA-Z 尺码</li>
                <li>本计算器使用国际标准尺码，不进行四舍五入</li>
            </ul>
        </div>
    </div>

    <script>
        function calculateSize() {
            // 获取输入值
            const underBust = parseFloat(document.getElementById('underBust').value);
            const overBust = parseFloat(document.getElementById('overBust').value);
            const resultDiv = document.getElementById('result');
            
            // 验证输入
            if (isNaN(underBust) || isNaN(overBust)) {
                resultDiv.style.display = 'block';
                resultDiv.style.backgroundColor = '#ffebee';
                resultDiv.innerHTML = '请输入有效的数字';
                return;
            }
            
            if (underBust <= 0 || overBust <= 0) {
                resultDiv.style.display = 'block';
                resultDiv.style.backgroundColor = '#ffebee';
                resultDiv.innerHTML = '请输入大于0的数值';
                return;
            }
            
            if (overBust < underBust) {
                resultDiv.style.display = 'block';
                resultDiv.style.backgroundColor = '#ffebee';
                resultDiv.innerHTML = '上胸围应大于或等于下胸围';
                return;
            }
            
            // 计算差值
            const difference = overBust - underBust;
            
            // 根据差值确定罩杯 (国际标准)
            let cupSize = '';
            if(difference <7.5)
            {
                cupSize = "AA"
            }
            else if(difference >= 7.5 && difference <= 10)
            {
                cupSize = "A"
            }
            else if(difference >= 10 && difference <= 12.5)
            {
                cupSize = "B"
            }
            else if(difference >= 12.5 && difference <= 15)
            {
                cupSize = "C"
            }
            else if(difference >= 15 && difference <= 17.5)
            {
                cupSize = "D"
            }
            else if(difference >= 17.5 && difference <= 20)
            {
                cupSize = "E"
            }
            else if(difference >= 20 && difference <= 22.5)
            {
                cupSize = "F"
            }
            else if(difference >= 22.5 && difference <= 25)
            {
                cupSize = "G"
            }
            else if(difference >= 25 && difference <= 27.5)
            {
                cupSize = "H"
            }
            else if(difference >= 27.5 && difference <= 30)
            {
                cupSize = "I"
            }
            else if(difference >= 30 && difference <= 32.5)
            {
                cupSize = "J"
            }
            else if(difference >= 32.5 && difference <= 35)
            {
                cupSize = "K"
            }
            else if(difference >= 35 && difference <= 37.5)
            {
                cupSize = "L"
            }
            else if(difference >= 37.5 && difference <= 40)
            {
                cupSize = "M"
            }
            else if(difference >= 40 && difference <= 42.5)
            {
                cupSize = "N"
            }
            else if(difference >= 42.5 && difference <= 45)
            {
                cupSize = "O"
            }
            else if(difference >= 45 && difference <= 47.5)
            {
                cupSize = "P"
            }
            else if(difference >= 47.5 && difference <= 50)
            {
                cupSize = "Q"
            }
            else if(difference >= 50 && difference <= 52.5)
            {
                cupSize = "R"
            }
            else if(difference >= 52.5 && difference <= 55)
            {
                cupSize = "S"
            }
            else if(difference >= 55 && difference <= 57.5)
            {
                cupSize = "T"
            }
            else if(difference >= 57.5 && difference <= 60)
            {
                cupSize = "U"
            }
            else if(difference >= 60 && difference <= 62.5)
            {
                cupSize = "V"
            }
            else if(difference >= 62.5 && difference <= 65)
            {
                cupSize = "W"
            }
            else if(difference >= 65 && difference <= 67.5)
            {
                cupSize = "X"
            }
            else if(difference >= 67.5 && difference <= 70)
            {
                cupSize = "Y"
            }
            else if(difference >= 70)
            {
                cupSize = "Z"
            }


            // 使用精确的下胸围数值
            const bandSize = underBust;
            
            // 显示结果
            resultDiv.style.display = 'block';
            resultDiv.style.backgroundColor = '#e8f5e9';
            resultDiv.innerHTML = `您的胸围尺码是: <span style="font-size: 24px; color: #4CAF50;">${bandSize}${cupSize}</span><br>
                                  下胸围: ${underBust} cm<br>
                                  上胸围: ${overBust} cm<br>
                                  差值: ${difference.toFixed(2)} cm`;
        }
    </script>
</body>
</html>